<?

class Mapa
{
	var $bToolbar = true;
	var $nWidthPopUp = 550;
	var $nHeightPopUp = 400;
	var $nWidth = 600;
	var $nHeight = 500;
	var $nZoom = 5;
	var $nCenterX = 0;
	var $nCenterY = 0;
	var $bAutoCenter = false;
	var $bShowCoord = false;
	var $cEventOnDblClick = 'mapDblclickEvent(event, this);';

	function setOnDblClick( $cEventOnDblClick )
	{
		$this->cEventOnDblClick = $cEventOnDblClick;
	}
	function setShowCoord( $bShowCoord = true)
	{
		$this->bShowCoord = $bShowCoord;
	}
	function setAutoCenter( $bAutoCenter = true)
	{
		$this->bAutoCenter = $bAutoCenter;
	}
	function setCentePoint( $bAutoCenter = true)
	{
		$this->bAutoCenter = $bAutoCenter;
	}
	function setCenter( $nX, $nY)
	{
		$this->nCenterX = $nX;
		$this->nCenterY = $nY;
	}
	function Mapa($nWidth, $nHeight, $nZoom)
		{
            $this->nWidth = $nWidth;
            $this->nHeight = $nHeight;
            $this->nZoom = $nZoom;
		}
	function addPoint( $x , $y, $cNombre, $cLink, $nModo, $cImagen)
		{
            $this->aPoints[] = array( $x, $y, $cNombre, $cLink, $nModo, $cImagen );
		}
	function makeView()
	{

		$this->make();
	}
	function setPopUpValues( $nWidth, $nHeight)
	{
		$this->nWidthPopUp = $nWidth;
		$this->nHeightPopUp = $nHeight;
	}
	function make()
	{
		if (  $this->aPoints )
		{
			$cTags = ""; $nqItems = $nSumX = $nSumY = 0;
            foreach ( $this->aPoints as $aPoint )
            {
                $x = $aPoint[0];$y =$aPoint[1];$nombre =$aPoint[2]; $link =$aPoint[3];$nModo=$aPoint[4];$imagen=$aPoint[5];
                //$cTags .= "<img src=\"" .  URL_IMAGES .  "/mapa_punto.png\" style=\"border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: " . ($x-25)  . "px; top: " . ($y - 25)  . "px; width: 51px; height: 51px; -moz-user-select: none;\" />";
				$cTags .=  "$x, $y,$nombre,$link,$nModo,$imagen|";
				$nqItems++; $nSumX += $x; $nSumY += $y;
            }
			$cTags = substr($cTags , 0, -1);
		}
		$nCenterY = $nCenterX = 4096;
		if ( $this->bAutoCenter )
		{
			if ( $nqItems == 1 )
			{
				$nCenterX = $nSumX ;
				$nCenterY = $nSumY ;
			} else
			{
				$nCenterX = ($nSumX / $nqItems) ;
				$nCenterY = ($nSumY / $nqItems) ;
			}
		} elseif ( $this->nCenterX > 0 && $this->nCenterY > 0 )
		{
			$nCenterX = $this->nCenterX ;
			$nCenterY = $this->nCenterY ;
		}
		//
	?>
    <div style='position: relative; height: <?= $this->nHeight;?>px; width: <?= $this->nWidth;?>px;' >
		<textarea id='map_tags' style='width:0px; height: 0px; visibility: hidden' ><?=$cTags?></textarea>
		<input type='hidden' name='map_values' id='map_values' value='<?= $this->nWidth . '|' . $this->nHeight . '|' . $this->nZoom . '|'  . $nCenterX .  '|'  . $nCenterY . '|'  . $this->nWidthPopUp .  '|'  . $this->nHeightPopUp; ?>' />
		<div id="map" ondblclick="<?= $this->cEventOnDblClick ?>" onmouseout="mapMouseoutEvent(event, this);" onmousedown="mapMousedownEvent(event, this);" onmouseup="mapMouseupEvent(event, this);"  onmousemove="return mapMousemoveEvent(event, this);"  style="overflow: hidden; left:0px; top:0px; position: absolute; height: <?= $this->nHeight;?>px; width: <?= $this->nWidth;?>px; padding: 0px; margin: 0px;cursor:hand;background-color: #efefef;" >
			<div id="canvas" style="position: absolute; left: 0px; top: 0px; z-index: 0;">
				<div id="images" style="position: absolute; left: 0px; top: 0px; z-index: 0;"></div>
				<div id="tags" style="position: absolute; left: 0px; top: 0px; z-index: 1;"></div>
			</div>
		</div>
		<div id="contextMenu" style="visibility: hidden; position: absolute; left: 0px; top: 0px; z-index: 1;">
			<ul class='contextMenu' >
				<li><a href='#' onclick="javascript: if( gnZoom < 5) { center( gnX1 + event.clientX - gnMapPosX, gnY1 + event.clientY - gnMapPosY ); changeMapZoom ( gnZoom + 1); closeElement('contextMenu');  }return false;">Zoom</a></li>
				<li><a  href='#' onclick="javascript: if ( gnZoom > 1) { center( gnX1 + event.clientX - gnMapPosX, gnY1 + event.clientY - gnMapPosY); changeMapZoom ( gnZoom - 1); closeElement('contextMenu');  } return false;">Zoom Out</a></li>
				<li><a href='#' onclick="javascript: closeElement('contextMenu'); return false">Cancelar</a></li>
			</ul>
		</div>
		<?
			if ( $this->bToolbar )  {
			$nIncX = $this->nWidth * 0.8;
			$nIncY = $this->nHeight * 0.8;
		?>
			<div id="toolbar" style="position: absolute; left: 0px; top: 0px; height: 20px; width: 226px; background-color: #ffffff; z-index: 1; ">
				<div style="margin: 0px; padding: 0px; position: absolute; left: 5px; top: 5px; -moz-user-select: none;">
						<ul class='mapaToolbar'>
							<li><img src='<?=URL_IMAGES?>/mapa/zoom.gif' style='width: 39px; height: 13px;float: left:display: inline'/></li>
							<? for( $nIndex = 1; $nIndex <= 5 ; $nIndex++ ) { 
								$cImagen = 'width: 26px; height: 13px; background-image: url(' . URL_IMAGES . '/mapa/z' . $nIndex  . ($this->nZoom == $nIndex ? '_over':'')  . '.gif);'
							?>
								<li style='<?= $cImagen; ?>' onmouseout='rollOutZoom ( this, <?=$nIndex?> )' onmouseover='rollOverZoom ( this, <?=$nIndex?> )' id='button_zoom_<?=$nIndex?>' onclick='javascript: changeMapZoom (<?= $nIndex  ?>); return false;' >
									<img src='<?=URL_IMAGES?>/mapa/z<?=$nIndex?>.gif' style='width: 0px; height: 0px;'/>
									<img src='<?=URL_IMAGES?>/mapa/z<?=$nIndex?>_over.gif' style='width: 0px; height: 0px;'/>
								</li>
							<? } ?>
							<li class='move_left'	style='background-image: url(<?=URL_IMAGES?>/mapa/fle_izq.gif);'  onclick='javascript: move( gnX1 - <?=$nIncX?>, gnY1 ); return false;'></li>
							<li class='move_up'		style='background-image: url(<?=URL_IMAGES?>/mapa/fle_arriba.gif);' onclick='javascript: move( gnX1 , gnY1 - <?=$nIncY?> );  return false;'></li>
							<li class='move_down'	style='background-image: url(<?=URL_IMAGES?>/mapa/fle_abajo.gif);' onclick='javascript: move( gnX1 , gnY1 + <?=$nIncY ?>); return false;'></li>
							<li class='move_right'	style='background-image: url(<?=URL_IMAGES?>/mapa/fle_der.gif);' onclick='javascript: move( gnX1 + <?=$nIncX?>, gnY1 ); return false;'></li>
							<?
								if ( $this->bShowCoord ) echo "<li id='map_coord' style='z-index: 99;padding: 3px;width: 15px;color: red;font-size: 18px; font-weight: bold; nowrap'>(,)</li>";
							?>
						</ul>
				</div>
			</div>
		<? } 
		?>
		<div style="position: absolute; bottom: 10px; right: 10px; width: 37px; height: 30px;"><img src="<?=URL_IMAGES?>/rosa_vientos.gif" width="37" height="30" /></div>
    </div>
	<?
	}
}
?>